import Head from 'next/head'
import Container from '../components/Container'
import Layout from '../components/Layout'
import { Button } from 'antd'
import Link from 'next/link'
import fetch from '../lib/fetch'
import 'antd/lib/button/style/index.css'    // 可以在任何地方导入node_modules里面的样式文件，当前路由下全局生效。

export default function Home(props) {
    const getFetch = () => {
        fetch({
            url: '/api/test',
            method: 'GET',
        })
    }
    const postFetch = () => {
        fetch({
            url: '/api/test',
            method: 'POST',
        })
    }
    return (
        <Layout>
            <Head>
                <title>首页</title>
            </Head>
            <Container>
                <div className='main'>
                    首页
                    <Button type='primary'>按钮</Button>
                    <ul>
                        {
                            props.dataList.map(v => (
                                <li key={v.id}>
                                    <Link href={`/detail/${v.id}`}>
                                        <a>{v.name}</a>
                                    </Link>
                                </li>
                            ))
                        }
                    </ul>
                    <div onClick={getFetch}>get</div>
                    <div onClick={postFetch}>post</div>
                </div>
            </Container>
        </Layout>
    )
}


export const getServerSideProps = async (ctx) => {
    const dataList = []
    for (let i = 0; i < 10; i++) {
        dataList.push({
            name: '商品' + i,
            id: i,
        })
    }
    return {
        props: {
            dataList: dataList,
        }
    }
}